<template>

  <div class="c-calendar">
    <div class="cld-container white_bg">
      <v-touch @swipedown="swipe('down')"
               @swipeup="swipe('up')">
        <div class="cld-top">
          <span class="year mclr">{{curY}}年</span>
          <span class="month">{{curM}}月</span>
        </div>
        <ul class="row days">
          <li class="col"
              v-for="(item,index) in days"
              :key="'board'+index">
            <div class="num">{{item}}</div>
          </li>
        </ul>
        <div class="cld-fixed"
             v-show="unfold">
          <ul class="cld-block row fixed-row">
            <li class="col"
                v-for="(item,index) in boardDays"
                :key="'cur-'+index">
              <div class="num pointer"
                   :class="{
                        today: today[4] === `${curY}-${curM}-${item}`, // 当天
                        select: selectDate[4] === `${curY}-${curM}-${item}` // 当前选中日期
                  }"
                   @click="chooseDate(item)">{{today[4] === `${curY}-${curM}-${item}`?'今':item}}</div>
              <div class="active">
                <div class="clr red"
                     v-if="~dayNumbers[0].indexOf(`${curY}-${curMM}-${(item < 10 ? '0' : '') + item}`)"></div>
                <div class="clr green"
                     v-if="~dayNumbers[1].indexOf(`${curY}-${curMM}-${(item < 10 ? '0' : '') + item}`)"></div>
                <div class="clr yellow"
                     v-if="~dayNumbers[2].indexOf(`${curY}-${curMM}-${(item < 10 ? '0' : '') + item}`)"></div>
              </div>
            </li>
          </ul>
        </div>
      </v-touch>
      <collapse>
        <transition enter-active-class="animated fadaIn faster">
          <v-touch @swipedown="swipe('down')"
                   @swipeup="swipe('up')"
                   @swipeleft="swipe('left')"
                   @swiperight="swipe('right')">
            <div class="cld-all"
                 v-show="!unfold">
              <div class="cld-main">
                <ul class="cld-block row">
                  <li class="col prev-m"
                      v-for="(item,index) in firstDay"
                      :key="'prev-'+index"></li>
                  <li class="col"
                      v-for="(item,index) in monthList[curM - 1]"
                      :key="'cur-'+index">
                    <div class="num pointer"
                         :class="{
                            today: today[4] === `${curY}-${curM}-${item}`, // 当天
                            select: selectDate[4] === `${curY}-${curM}-${item}` // 当前选中日期
                      }"
                         @click="chooseDate(item)">{{today[4] === `${curY}-${curM}-${item}`?'今':item}}</div>
                    <div class="active">
                      <div class="clr red"
                           v-if="~dayNumbers[0].indexOf(`${curY}-${curMM}-${(item < 10 ? '0' : '') + item}`)"></div>
                      <div class="clr green"
                           v-if="~dayNumbers[1].indexOf(`${curY}-${curMM}-${(item < 10 ? '0' : '') + item}`)"></div>
                      <div class="clr yellow"
                           v-if="~dayNumbers[2].indexOf(`${curY}-${curMM}-${(item < 10 ? '0' : '') + item}`)"></div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </v-touch>
        </transition>
      </collapse>
    </div>
    <div class="arrow"
         @click="unfold = !unfold">
      <img src="./cld_btm.png"
           alt="">
      <img class="arrow_icon"
           src="./arrow.png"
           alt=""
           :class="{active: !unfold}">
    </div>
  </div>
</template>

<script>
import collapse from '@/components/collapse'

export default {
  name: 'calendar',
  components: {
    collapse
  },
  props: {
    dayNumbers: [Array]
  },
  data () {
    return {
      unfold: true,
      monthList: [],
      today: [],
      curY: '',
      curM: '',
      days: ['日', '一', '二', '三', '四', '五', '六'],
      selectDate: []
    }
  },
  computed: {
    curMM () {
      return (this.curM < 10 ? '0' : '') + this.curM
    },
    prevM () {
      return this.curM === 0 ? 11 : this.curM - 1
    },
    nextM () {
      return this.curM === 11 ? 0 : this.curM + 1
    },
    boardDays () {
      // 当前天所在行的日期
      let arr = new Array(7)
      let d = this.curM === this.today[2] ? this.today[3] : 1
      if (this.selectDate[3]) {
        d = this.selectDate[3]
      }
      let pst = (d + this.firstDay - 1) % 7 // 当前天所在星期
      arr[pst] = d
      for (let i = 0; i < arr.length; i++) {
        if (this.firstDay > 0 && d <= (7 - this.firstDay) && i < pst && i < this.firstDay) {
          arr[i] = ''
          // arr[i] = this.monthList[this.prevM] - (this.firstDay - i - 1)
        } else if (arr[pst] + (i - pst) > this.monthList[this.today[2] - 1]) {
          arr[i] = ''
        } else {
          arr[i] = arr[pst] + (i - pst)
        }
      }
      return arr
    },
    firstDay () {
      if (!this.curY || !this.curM) return 0
      let year = this.curY
      let month = this.curM - 1
      let fDate = new Date(year, month, 1) // 当月首日
      return fDate.getDay() // 当月首日星期几
    },
    isLeapYear () {
      if (!this.curY) return 0
      let year = this.curY
      return year % 100 === 0 ? (year % 400 === 0 ? 1 : 0) : (year % 4 === 0 ? 1 : 0)
    }
  },

  methods: {
    init () {
      this.today = this.getDate()
      this.selectDate = this.getDate()
      this.curY = this.today[1]
      this.curM = this.today[2]

      this.$emit('changeMonth', this.curY, this.curM)
      this.handleDate()
      this.monthList = [31, 28 + this.isLeapYear, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] // 每月天数
    },
    chooseDate (num) {
      this.selectDate = this.getDate(`${this.curY}-${this.curM}-${num}`)
      this.handleDate()
    },
    handleDate () {
      this.$emit('chooseDate', this.selectDate)
    },
    getDate (date) {
      // [yyyy-MM-dd,y,m,d,yyyy-M-d]
      let dt = null
      if (date) {
        dt = new Date(date.replace(/-/g, '/'))
      } else {
        dt = new Date()
      }
      let y = dt.getFullYear()
      let m = dt.getMonth()
      let d = dt.getDate()
      return [`${y}-${m < 9 ? '0' + (m + 1) : m + 1}-${d < 10 ? '0' + d : d}`, y, m + 1, d, `${y}-${m + 1}-${d}`]
    },
    getMInd (ind) {
      let y = this.today.y
      let m = this.today.m
      if (m + ind > 12) {
        ++y
        m = ind
      } else {
        m += ind
      }
      return { y, m }
    },
    prev () {
      if (this.curM === 1) {
        --this.curY
        this.curM = 12
        return
      }
      --this.curM
      this.$emit('changeMonth', this.curY, this.curM)
    },
    next () {
      if (this.curM === 12) {
        ++this.curY
        this.curM = 1
        return
      }
      ++this.curM
      this.$emit('changeMonth', this.curY, this.curM)
    },
    swipe (type) {
      // 滑动日历：下滑-展开，上滑-收起，左滑-下月，右滑-上月

      switch (type) {
        case 'down':
          this.unfold = false
          break
        case 'up':
          this.unfold = true
          break
        case 'left':
          this.next()
          break
        case 'right':
          this.prev()
          break
      }
    }
  },
  created () {
    this.init()
  }
}
</script>
<style lang="stylus" scoped>
$color-today = rgba(167, 168, 180, 1)
$color-select = $color-main
.c-calendar
  position relative
  user-select none
  .cld-container
    position relative
    z-index 20
    overflow hidden
    padding 15px 10px 0
    transition all 0.5s
  .cld-top
    flexAlign(space-between)
    padding 0 15px 25px
    font-weight 600
    .year
      font-size 24px
    .month
      font-size 20px
  .days .col .num
    font-weight 500
    opacity 1
  .row
    display flex
    flex-wrap wrap
    width 100%
    .col
      position relative
      margin-bottom 16px
      width 14.285%
    .num
      position relative
      z-index 5
      // overflow hidden
      margin 0 auto
      width 24px
      height 24px
      // font-weight 600
      border-radius 50%
      background-color transparent
      text-align center
      font-weight 600
      font-size 15px
      line-height 24px
      opacity 0.8
    .num.today
      background-color $color-today
      color #fff !important
    .num.select
      background-color $color-select
      color #fff !important
    .active
      flexAlign(center)
      positionBL(-1px, 50%, -50%, 100%)
      // top 2px
      margin 0 auto
      width 34px
      content ' '
    .clr
      width 4px
      height 4px
      & + .clr
        margin-left 2px
    .red
      background-color $clr-r
    .yellow
      background-color $clr-y
    .green
      background-color $clr-g
  .cld-main
    position relative
    z-index 10
    // height 200px
  .arrow
    position relative
    img
      width 100%
    .arrow_icon
      positionTL(50%, 50%, -50%, -130%)
      width 12px
      transition all 0.1s
      &.active
        transform translate(-50%, -130%) rotate(-180deg)
</style>
